<template>
    <div>

        <div id="sign-modal" tabindex="-1" role="dialog" >
            <!-- <div class="modal fade" id="sign-modal"  tabindex="-1" role="dialog"> -->
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content" style="padding-top: 40px" >

                    <div class="modal-body" >
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#signin-form" aria-controls="signin-form" role="tab" data-toggle="tab">登录</a>
                            </li>
                            <li role="presentation">
                                <a href="#signup-form" aria-controls="signup-form" role="tab" data-toggle="tab">注册</a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <!-- 登录 -->
                            <div role="tabpanel" class="tab-pane active" id="signin-form">
                                <form action="/login" method="post">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-user" style="margin:0;"></i>
                                            </div>

                                            <input type="phone" name="login" class="form-control" placeholder="请输入手机号"
                                                v-model="phone"
                                                v-validate="{required:true,regex:  /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/ }"
                                                :class="{ invalid: errors.has('phone') }">
                                            <span class="error">{{errors.first("phone")}}</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-lock" style="margin:0;"></i>
                                            </div>
                                            <input type="password" name="password" class="form-control"
                                                placeholder="密码6到13位字母和数字组成" v-model="password"
                                                v-validate="{required:true,regex:  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,13}$/ }"
                                                :class="{ invalid: errors.has('password') }">
                                            <span class="error">{{errors.first("password")}}</span>
                                        </div>
                                    </div>

                                    <div class="form-inline verify-code-item" style="display:none;">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <input type="text" name="captcha_v" class="form-control"
                                                    placeholder="请输入验证码">
                                            </div>
                                        </div>
                                        <img class="verify-code" src="" source="img/captcha.gif">
                                    </div>
                                    <div class="form-group remember-login">

                                        <a class="pull-right" href="#signup-form" @click="toLoginType2">验证码登录</a>

                                    </div>
                                    <div class="form-group">
                                        <input class="btn btn-primary" name="submit" type="button" value="登 录"
                                            @click="userLogin">
                                    </div>
                                    <div class="form-group error-msg">
                                        <div class="alert alert-danger" role="alert"></div>
                                    </div>

                                    <!-- <div class="form-group agree-privacy">
                                        还没诚学信付账号？<a href="#signup-form" target="_blank">立即注册</a>
                                    </div> -->

                                </form>
                            </div>

                            <!-- 注册 -->
                            <div role="tabpanel" class="tab-pane" id="signup-form">
                                <form action="/register" method="post">
                                    <div class="form-group">

                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-user" style="margin:0;"></i>
                                            </div>
                                            <input type="phone" class="form-control" placeholder="请输入手机号"
                                                v-model="phone" name="phone"
                                                v-validate="{required:true,regex:  /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/ }"
                                                :class="{ invalid: errors.has('phone') }">
                                            <span class="error">{{errors.first("phone")}}</span>
                                        </div>

                                    </div>

                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-shield" style="margin:0;"></i>
                                            </div>

                                            <input type="text" name="code" class="form-control" v-model="inputCode">
                                            <span class="error">{{errors.first("code")}}</span>


                                            <input :value="codeText" type="button" class="getCode"
                                                @click.stop="toGetCode" ref="eleCode" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-addon">
                                                <i class="fa fa-lock" style="margin:0;"></i>
                                            </div>
                                            <input type="password" name="password" class="form-control"
                                                placeholder="密码6到13位字母和数字组成" v-model="password"
                                                v-validate="{required:true,regex:  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,13}$/ }"
                                                :class="{ invalid: errors.has('password') }">
                                            <span class="error">{{errors.first("password")}}</span>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <input class="btn btn-primary" type="button" value="注册" @click="userRegister">
                                    </div>

                                    <div class="form-group agree-privacy">
                                        注册表示您已经同意我们的<a href="privacy/index.html" target="_blank">隐私条款</a>
                                    </div>
                                    <div class="form-group error-msg">
                                        <div class="alert alert-danger" role="alert"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>


export default {
    name: 'LoginIndex',
    data() {
        return {
            phone: '',
            password: '',
            loginType: 2,
            inputCode: '', //输入的验证码
            codeText: '获取验证码',
            timer: 60,//倒计时时间设置成60秒
        }
    },

    methods: {

        async toLoginType2() {
            this.loginType = 2;
            const location = {
                name: 'loginType2',
            }
            this.$router.push(location)
        },

        // 用户登录
        async userLogin() {
            try {
                let result = await this.$API.reqLogin({
                    phone: this.phone,
                    pwd: this.password,
                    type: 1,
                });

                if (result.code == 0 && result.msg == "success") {
                    alert('登录成功！')
                    this.$router.push('home');
                    // this.$store.commit('user/GETUSER',this.phone);
                    localStorage.setItem('user',this.phone)
                } else {
                    if(result.data){
                        alert("登录失败！" + result.data.phone);
                    }else{
                        alert("登录失败！" + result.msg);
                    }
                }
            } catch (error) {
                alert(error.message);
            }
        },

        // 用户注册
        async userRegister() {
            let data = {
                phone: this.phone,
                pwd: this.password,
                validaCode: this.inputCode
            }
            try {
                let result = await this.$API.reqRegister(data);
                if (result.code == 0 && result.msg == "success") {
                    alert('注册成功！')
                    this.$router.push('home');
                } else {
                    if(result.data){
                        alert("注册失败！" + result.data.phone);
                    }else{
                        alert("注册失败！" + result.msg);
                    }
                }
            } catch (error) {
                alert(error.message);
            }
        },


        //验证码倒计时
        codeTimer() {
            let _this = this;//setTimeout里面的this不一样,所以在这里先保存好
            let getCode=document.getElementsByClassName('getCode')
            if (this.timer >= 1) {
                this.$refs.eleCode.setAttribute("disabled", "true");
                this.$refs.eleCode.setAttribute("value", this.timer + "s 后获取");
                this.timer--;
                setTimeout(function () {
                    _this.codeTimer();
                }, 1000);
               // console.log(this.timer ,1)
               //  getCode.style.color='#ddd'

            } else {
                // console.log(this.timer ,2)
                // getCode.style.color='#41bcff'
                this.$refs.eleCode.setAttribute("value", this.codeText);
                this.$refs.eleCode.removeAttribute("disabled");
                this.timer = 60;
            }
        },

        //获取验证码
        toGetCode() {
            //格式正确调用接口发送验证码
            if ((/^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/).test(this.phone)) {
                this.codeTimer();
                this.isTrue = true;
                this.reqCode();
            } else {
                alert('请注意手机格式且手机号必须填写！')
            }
        },

        // 获取验证码
        async reqCode() {
            let data = {
                phone: this.phone,
                type: this.loginType
            }
            try {
                let result = await this.$API.reqVCode(data);
                // console.log('result', result);

                if (result.code !== 0 && result.msg !== "success") {
                    alert("手机短信发送失败！" + result.data.phone);
                }

            } catch (error) {
                alert(error.message);
            }
        },

    },



}
</script>

<style scoped>
.getCode {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 999;
    background-color: #ffffff;
    color: #41bcff;

}

.error {
    color: red;
}

/* modal 模态框*/
#invite-user .modal-body {
    overflow: hidden;
}

#invite-user .modal-body .form-label {
    margin-bottom: 16px;
    font-size: 14px;
}

#invite-user .modal-body .form-invite {
    width: 80%;
    padding: 6px 12px;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    border-radius: 5px;
    float: left;
    margin-right: 10px;
}

#invite-user .modal-body .msg-modal-style {
    background-color: #7dd383;
    margin-top: 10px;
    padding: 6px 0;
    text-align: center;
    width: 100%;
}

#invite-user .modal-body .modal-flash {
    position: absolute;
    top: 53px;
    right: 74px;
    z-index: 999;
}

/* end modal */



.navbar-banner {
    margin-top: 50px;
    /* background: url("img/homepage-bg.png"); */
    background-size: cover;
    background-repeat: no-repeat;
}

.navbar-brand {
    position: absolute;
    left: 50%;
    line-height: 50px;
}

.form-group .btn {
    margin: 20px 0;
}

.btn-primary {
    border-radius: 20px;
    background-color: #2e7ba7;
    background: linear-gradient(to right, white, #2e7ba7);
    border: none;
}
</style>
